<template>
    <div class="pt-5">
        <el-table :data="tableData" v-loading="loading" @row-click="row" @row-contextmenu="contextmenu"
            @contextmenu.prevent="rightClick" v-el-table-infinite-scroll="load" style="width: 100%" height="85.4vh">
            <el-table-column>
                <template #header>
                    <el-dropdown trigger="click" @visible-change="visibie" placement="bottom-start">
                        <div class="el-dropdown-link flex aic">
                            <span>{{ $t('main.user') }}:</span>
                            <el-select v-model="userText" class="w60p ml-5" @change="customers" :remote-method="inpcustomer"
                                remote @visible-change="visible" multiple collapse-tags collapse-tags-tooltip filterable
                                placeholder="user">
                                <el-option v-for="item in customerArr" :key="item.value" :label="item.value"
                                    :value="item.id" />
                            </el-select>
                        </div>
                        <!-- <template #dropdown>
                            <el-input @input="inputEvent" v-model="userText" placeholder=""
                                :prefix-icon="Search"></el-input>
                        </template> -->
                    </el-dropdown>
                </template>
                <template v-slot="title">
                    <div class="flex aic">
                        <span>{{ title.row.user && title.row.user.name }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column>
                <template #header>
                    <el-dropdown trigger="click" @visible-change="visibie">
                        <span class="el-dropdown-link">
                            {{ $t('main.country') }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-input @input="inputEvent" v-model="stateTetx" placeholder=""
                                :prefix-icon="Search"></el-input>
                        </template>
                    </el-dropdown>
                </template>
                <template v-slot="title">
                    <div class="flex aic">
                        <span>{{ title.row.country && title.row.country.name }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column>
                <template #header>
                    <el-dropdown trigger="click" @visible-change="visibie" class="w100p">
                        <div class="el-dropdown-link flex aic">
                            <span>{{ $t('main.clientGrade') }}:</span>
                            <el-select v-model="clientTetx" class="w60p ml-5" @change="clients" @visible-change="visible"
                                placeholder="Select">
                                <el-option v-for="item in clientArr" :key="item.value" :label="item.value"
                                    :value="item.id" />
                            </el-select>
                        </div>
                    </el-dropdown>
                </template>
                <template v-slot="client">
                    <span>{{ client.row.customer_info_grade }}</span>
                </template>
            </el-table-column>
            <el-table-column>
                <template #header>
                    <el-dropdown trigger="click">
                        <div class="el-dropdown-link flex aic w100p">
                            <span>{{ $t('main.retail') }}:</span>
                            <el-select v-model="typeText" class="w50p ml-5" @change="changeType" @visible-change="visible"
                                placeholder="Select">
                                <el-option v-for="item in typeList" :key="item.value" :label="item.value"
                                    :value="item.id" />
                            </el-select>
                        </div>
                    </el-dropdown>
                </template>
                <template v-slot="title">
                    <div class="flex aic">
                        <span>{{ title.row.RetailWholsale }}</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- <fileDetails v-else @userList="userList" :detalisList="detalisList"></fileDetails> -->
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as $axios from '../../../api/index'
import fileDetails from './fileDetails.vue';
import { Search } from '@element-plus/icons-vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { useDemoStore } from '../../../pinia/index'
const store = useDemoStore()

const props = defineProps({
    user_id: Array
})

// 加载
const loading = ref(false)

// 点击某一行的时候触发
// const detalisList = ref([])
const row = (value) => {
    const data = {
        path: '',
        token: store.token,
        user_id: props.user_id,
        customer_id: value.customer_info_id,
    }
    $axios.$fileGet(data).then(res => {
        res.data.forEach(item => {
            item.size = item.size ? (item.size / 1024 / 1000).toFixed(2) + 'M' : '暂无数据'
        })
        emits('detalisData', res.data)
        emits('getTotal', res.data.length)
        // console.log(res.data)
    })
    const user = value.value == 1 ? value.customer_info_id : value.user.id
    emits('getClient', value.customer_info_id, user)
    // console.log(value)
}

// // 子组件触发的事件
// const userList = (value) => {
//     detalisList.value = value
//     console.log(value)
// }


// 用户文本框
const userText = ref([])

// 国家文本框
const stateTetx = ref('')

// 客户文本框
const clientTetx = ref('')


// 零售/批发文本框
const typeText = ref('')

// 客户下拉框出现/隐藏时触发
const visible = () => {
    inpcustomer()
}

// 客户搜索框
const clientArr = ref([
    {
        value: 'All',
        id: ''
    },
    {
        value: 'VIP1',
        id: 'VIP1'
    },
    {
        value: 'VIP2',
        id: 'VIP2'
    },
    {
        value: 'VIP3',
        id: 'VIP3'
    },
    {
        value: 'VIP4',
        id: 'VIP4'
    },
    {
        value: 'VIP5',
        id: 'VIP5'
    },
])

// 客户多选框
const clients = (value) => {
    inputEvent()
    console.log(clientTetx.value)
}

// 用户搜索框
const customerArr = ref([])
// const clientName = ref('')
const inpcustomer = (text) => {
    const data = {
        token: store.token,
        user_id: props.user_id,
        keywords: text || ''
    }
    $axios.$userUser_list(data).then(res => {
        // console.log(res.data)
        customerArr.value = res.data.map(item => {
            return {
                value: item.name,
                id: item.id
            }
        })
    })
}

// 用户多选框
const customers = () => {
    inputEvent()
}


// 零售/批发
const typeList = ref([
    {
        value: 'All',
        id: ''
    },
    {
        value: 'Wholesale',
        id: 0
    },
    {
        value: 'Retail',
        id: 1
    }
])

const changeType = () => {
    inputEvent()
}


// 输入事件,获取文件信息
// 获取询盘文件数据
var timer
const tableData = ref([])
var data
const inputEvent = (value) => {
    loading.value = true
    clearTimeout(timer);
    timer = setTimeout(() => {
        data = {
            token: store.token,
            limit: 25,
            page: 1,
            type: typeText.value,
            country_name: stateTetx.value,
            grade: clientTetx.value,
            user_id: store.type != 4 ? userText.value.length == 0 ? props.user_id : userText.value : [],
            customer_id: store.type == 4 ? userText.value.length == 0 ? props.user_id : userText.value : [],
        }
        $axios.$customerCustomer_list(data).then(res => {
            loading.value = false
            tableData.value = res.data.data
            emits('getTotal', res.data.total)
            console.log(res)
        })
    }, 400)
}


const load = () => {
    loading.value = true
    if (data) {
        data.page++
        $axios.$customerCustomer_list(data).then(res => {
            loading.value = false
            tableData.value = [
                ...tableData.value,
                ...res.data.data
            ]
        })
    } else {
        inputEvent()
    }
}

// 数据长度
const emits = defineEmits(['getTotal', 'detalisData', 'getClient'])

// 下拉框出现隐藏
// const visibie = ()=>{
//     tetx.value = ''
// }

</script>

<style lang="less" scoped></style>